Fix alignment of content in conditional checkboxes and radio buttons #5070
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Checkboxes and radio buttons are visually 40 pixels wide, however their actual width on the page is 44 pixels, creating an invisible 2 pixel 'border' around the input that the conditional area's margin-left calculation didn't account for.
📋 StatsFile sizes
Modules
View stats and visualisations on the review app Action run for 4e83cf8 |
Stylesheets changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index f0aa66d38..fd84364d2 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -2597,8 +2597,8 @@ screen and (forced-colors:active) {
.govuk-checkboxes__conditional {
margin-bottom: 15px;
- margin-left: 18px;
- padding-left: 33px;
+ margin-left: 20px;
+ padding-left: 35px;
border-left: 4px solid #b1b4b6
}
@@ -4988,8 +4988,8 @@ screen and (forced-colors:active) {
.govuk-radios__conditional {
margin-bottom: 15px;
- margin-left: 18px;
- padding-left: 33px;
+ margin-left: 20px;
+ padding-left: 35px;
border-left: 4px solid #b1b4b6
}
Action run for 4e83cf8 |
Other changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss b/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss
index d34fc39f5..625330c4a 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss
@@ -159,7 +159,7 @@
// to be an even number in order to be centred under the 40px checkbox or radio.
$conditional-border-width: $govuk-border-width-narrow;
// Calculate the amount of padding needed to keep the border centered against the checkbox.
- $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2);
+ $conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2);
// Move the border centered with the checkbox
$conditional-margin-left: $conditional-border-padding;
// Move the contents of the conditional inline with the label
diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/fixtures.json b/packages/govuk-frontend/dist/govuk/components/checkboxes/fixtures.json
index dd60af5f1..afe492aa7 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/fixtures.json
@@ -663,7 +663,7 @@
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
- "screenshot": false,
+ "screenshot": true,
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend\">\n How do you want to be contacted?\n </legend>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"email\" checked data-aria-controls=\"conditional-how-contacted-checked\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked\">\n Email\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional\" id=\"conditional-how-contacted-checked\">\n <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-checked-2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-2\">\n Phone\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-checked-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"text\" data-aria-controls=\"conditional-how-contacted-checked-3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-3\">\n Text message\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-checked-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n </div>\n </div>\n </fieldset>\n</div>"
},
{
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/_index.scss b/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
index 51fc8055d..602ba8f57 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
@@ -176,7 +176,7 @@
// to be an even number in order to be centred under the 40px checkbox or radio.
$conditional-border-width: $govuk-border-width-narrow;
// Calculate the amount of padding needed to keep the border centered against the radios.
- $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2);
+ $conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2);
// Move the border centered with the radios
$conditional-margin-left: $conditional-border-padding;
// Move the contents of the conditional inline with the label
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/fixtures.json b/packages/govuk-frontend/dist/govuk/components/radios/fixtures.json
index b72059485..c346ad4a8 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/radios/fixtures.json
@@ -439,7 +439,7 @@
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
- "screenshot": false,
+ "screenshot": true,
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend\">\n How do you want to be contacted?\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"radio\" value=\"email\" checked data-aria-controls=\"conditional-how-contacted-checked\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked\">\n Email\n </label>\n </div>\n <div class=\"govuk-radios__conditional\" id=\"conditional-how-contacted-checked\">\n <label class=\"govuk-label\" for=\"context-email\">Email</label>\n <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-checked-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-2\">\n Phone\n </label>\n </div>\n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-checked-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-3\">\n Text message\n </label>\n </div>\n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n </div>\n </div>\n </fieldset>\n</div>"
},
{
Action run for 4e83cf8 |
36degrees
approved these changes
Jun 14, 2024
querkmachine
changed the title
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Checkboxes and radio buttons are visually 40 pixels wide, however their actual width on the page is 44 pixels, with an invisible 2 pixel 'border' around the input that the conditional area's margin-left calculation didn't account for.
Fixes #5069.
Changes
$conditional-border-paddingcalculation in both components to use$govuk-touch-target-sizeinstead of$govuk-checkboxes-sizeor$govuk-radios-size.